<template>
  <div class="room-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24" style="margin-bottom: 20px">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item label="策略名称:">
            <el-input
              v-model.trim="queryForm.strategyName"
              placeholder="策略名称"
              clearable
              @keyup.enter.native="queryData()"
            />
          </el-form-item>
          <el-form-item label="审批状态:">
            <el-select
              v-model="queryForm.approved"
              placeholder="请选择审批状态"
              @change="queryData()"
            >
              <el-option label="请选择审批状态" value=""></el-option>
              <el-option value="0" label="未审批"></el-option>
              <el-option value="1" label="已审批"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="默认价格策略:">
            <el-select
              v-model="queryForm.isDefault"
              placeholder="请选择默认价格策略"
              @change="queryData()"
            >
              <el-option label="请选择默认价格策略" value=""></el-option>
              <el-option value="0" label="否"></el-option>
              <el-option value="1" label="是"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-bottom-panel :span="24">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          新增价格策略
        </el-button>
        <el-button icon="el-icon-plus" type="primary" @click="handleMultiEdit">
          批量设定价格策略
        </el-button>
        <el-button icon="el-icon-refresh" type="success" @click="syncWuliuData">
          物料同步
        </el-button>
      </vab-query-form-bottom-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      :height="height"
      :element-loading-text="elementLoadingText"
      @selection-change="setSelectRows"
    >
      <el-table-column
        show-overflow-tooltip
        width="400"
        prop="strategyName"
        label="价格策略名称"
      ></el-table-column>
      <el-table-column show-overflow-tooltip prop="isDefault" label="默认策略">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isDefault == true"
            type="default"
            disable-transitions
          >
            是
          </el-tag>
          <el-tag v-else type="info" disable-transitions>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="isLocked" label="是否禁用">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.isLocked == true"
            type="default"
            disable-transitions
          >
            是
          </el-tag>
          <el-tag v-else type="info" disable-transitions>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="status" label="当前状态">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.approved == 0"
            type="default"
            disable-transitions
          >
            未审核
          </el-tag>
          <el-tag
            v-else-if="scope.row.approved == 1"
            type="success"
            disable-transitions
          >
            已审批
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        show-overflow-tooltip
        label="操作"
        width="500"
      >
        <template #default="{ row }">
          <el-button icon="el-icon-document-copy" @click="handleCopy(row)">
            复制
          </el-button>
          <el-button
            icon="el-icon-view"
            type="success"
            @click="handleDetails(row)"
          >
            查看详细
          </el-button>

          <el-button
            v-show="row.approved == 0 && row.isLocked != true"
            v-permissions="['admin']"
            icon="el-icon-finished"
            type="warning"
            @click="handleApproval(row)"
          >
            审批
          </el-button>
          <el-button
            icon="el-icon-edit"
            type="primary"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            v-show="row.approved != 1"
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :page-size="queryForm.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
  import {
    getList,
    doDelete,
    doCopy,
    doUpdateCategoryCode,
  } from '@/api/priceStrategyManagement'
  export default {
    name: 'PriceStrategyManagementList',
    components: {},
    data() {
      return {
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: null,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          strategyName: '',
          approved: null,
        },
        copyStrategyName: '',
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight(2)
      },
    },
    created() {
      this.fetchData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleApproval(row) {
        // this.$baseConfirm('你确定要审核当前项目吗', null, async () => {
        //   // const { msg } = await doDelete({ ids: row.id })
        //   this.$baseMessage('审核成功', 'success')
        //   this.fetchData()
        // })
        this.handleDetails(row)
      },
      handleCopy(row) {
        //复制价格策略
        // this.$baseConfirm('你确定要复制当前项吗', null, async () => {
        //     await doCopy(row.id)
        //     this.$baseMessage('当前项目成功被复制', 'success')
        //     this.fetchData()
        //   });

        const h = this.$createElement
        let _this = this
        this.copyStrategyName = ''
        this.$msgbox({
          title: '复制价格策略',
          message: h('p', null, [
            h(
              'input',
              {
                class: 'el-input__inner',
                domProps: {
                  placeholder: '输入价格策略名称',
                  required: true,
                  value: '',
                },
                on: {
                  input: function (event) {
                    _this.copyStrategyName = event.target.value
                  },
                },
              },
              null
            ),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
              let strategyName = _this.$baseLodash.trim(_this.copyStrategyName)
              if (strategyName.length == 0) {
                _this.$baseMessage('策略名称不能空', 'error')
                return
              }
              instance.confirmButtonLoading = true
              instance.confirmButtonText = '执行中...'
              await doCopy({
                strategyId: row.id,
                strategyName: _this.copyStrategyName,
              })
              setTimeout(() => {
                done()
                setTimeout(() => {
                  instance.confirmButtonLoading = false
                  _this.fetchData()
                }, 300)
              }, 1000)
            } else {
              done()
            }
          },
          inputPattern: /\d./,
          inputErrorMessage: 'dddd',
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '价格策略复制完成',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '取消价格策略复制操作',
            })
          })
      },
      handleDetails(row) {
        this.$router.push({
          name: 'PriceStrategyDetails',
          params: { id: row.id },
        })
      },
      handleEdit(row) {
        this.$router.push({
          name: 'PriceStrategyManage',
          params: { strategyInfo: row },
        })
      },
      handleMultiEdit() {
        this.$router.push({
          name: 'MultiPriceStrategyManage'
        })
      },
      handleDelete(row) {
        if (row.id) {
          this.$baseConfirm('你确定要删除该价格策略吗？', null, async () => {
            await doDelete(row.id)
            this.$baseMessage('价格策略删除成功。', 'success')
            this.fetchData()
          })
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      async syncWuliuData() {
        this.$baseConfirm('确定全量同步物料吗？', null, async () => {
          let loading = this.$baseLoading(null, '数据更新中...')
          const data = await doUpdateCategoryCode()
          loading.close()

          if (data && data.length > 0) {
            this.$baseAlert(data[0])
          }
          //更新列表
          this.fetchData()
        })
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { records, totalElement } = await getList(this.queryForm)
        this.list = records
        this.total = totalElement
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-table__body {
    .el-link:last-child {
      margin-left: 10px;
    }
  }
</style>
